<template>
  <!-- 爱心圈 -->
  <view id="content">
    <!-- 背景 -->
    <!-- <view class="head-img" style="">
			<image class="bgc" src="https://z3.ax1x.com/2021/09/06/h4pWgP.png" mode=""></image>
		</view> -->
    <view class="QR-BOX">
			<view class="title">简单3步，立得爱电</view>
			<view class="images">
				<view class="">
					<view class="fximg"><image src="../../../static/love_circle/fx_1.png" mode=""></image></view>
					<view class="fxtips">邀请好友<br />关注人人寻</view>
				</view>
				<view class="arrows">
					<image src="../../../static/love_circle/fxjt.png" mode=""></image>
				</view>
				<view >
					<view class="fximg"><image src="../../../static/love_circle/fx_2.png" mode=""></image></view>
					<view class="fxtips">好友关注</view>
				</view>
				<view class="arrows">
					<image src="../../../static/love_circle/fxjt.png" mode=""></image>
				</view>
				<view >
					<view class="fximg"><image src="../../../static/love_circle/fx_3.png" mode=""></image></view>
					<view class="fxtips">获得爱电</view>
				</view>
			</view>
      <view class="invate" @click="save_shareimg"> 邀请好友得爱电 </view>
      <view class="txt"> 快动动手指分享出去吧 </view>
    </view>
    <view class="level-box">
      <image class="back-img" src="../../../static/index/tgsjbj.png" mode="" style="">
        <view class="grade-box">
          <view class="top">
            <text class="next-title" style="">升级为</text>
            <text class="next-content" style="">{{ grade_info.next_title }}</text>
          </view>
          <view class="grade-now" style="" @click="to_next_level"> 立即升级 </view>
          <view class="cur-box" style="">
            <view class="cur-left" style=""> 当前等级：{{ grade_info.cur_title }} </view>
            <view class="cur-right" style=""> 规则说明 </view>
          </view>
        </view>
      </image>
    </view>
    <view class="list-box" >
      <view class="popularize-list">
        <view class="title">
          <text style="font-size: 30rpx">爱心圈</text>
          <!-- <text style="font-size: 24rpx; color: #757575;">爱电：***</text> -->
          <text style="font-size: 24rpx; color: #757575">粉丝：{{ grade_info.fans == 0 ? '0' : grade_info.fans }}</text>
        </view>
        <!-- 列表 -->
        <view class="list" v-for="(item, index) in fans_list" v-if="fans_list.length != 0">
          <!-- 左边 -->
          <view class="left">
            <image class="head-sculpture" :src="item.headimgurl" mode=""></image>
            <view>
              <view class="title_">
                <text>{{ item.nickname || 'fill' }}</text>
                <image class="sex" :src="boy" mode="" v-if="item.sex === 1"></image>
                <image class="sex" :src="girl" mode="" v-if="item.sex === 2"></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-popup class="pic-box"  v-model="show_pic" mode="center" border-radius="20" @close="closePop">
      <view class="outter-box" style="">
        <image :src="share_img" style="width: 100%; height: 100%" mode="aspectFit"></image>
        <view class="note-txt" style=""> 长按按住图片, 保存到相册 </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
var wx = require('jweixin-module')
export default {
  data() {
    return {
      ticket: {},

      share_img: '',

      show_pic: false,
      fans_list: [],
      grade_info: {
        fans: '',
        cur_level: '',
        cur_title: '',
        next_level: '',
        next_title: ''
      },
      boy: '../../../static/mine/nan.png',
      girl: '../../../static/mine/nv.png'
    }
  },
  onLoad() {
    this.__config_wx_pay()
    this.__get_shareimg()

    this.get_fans_list()

    this.get_user_level()
  },
  methods: {
    // 获取用户等级
    get_user_level() {
      let self = this
      this.$u.api.get_gradeInfo().then((res) => {
        if (res.code == 200) {
          self.grade_info = {
            fans: res.data.fans,
            cur_level: res.data.at.grade,
            cur_title: res.data.at.rank,
            next_level: res.data.ne.grade,
            next_title: res.data.ne.rank
          }
        }
      })
    },
    // 配置微信支付
    __config_wx_pay() {
      let self = this
      ;(async () => {
        let url = window.location.href.split('#')[0]
        let res_ticket = await this.$u.api.get_share_ticket({
          current_url: url
        })
        let ticket = res_ticket.data

        let cfg_data = {
          debug: false,
          appId: ticket.appId,
          timestamp: ticket.timestamp,
          nonceStr: ticket.nonceStr,
          signature: ticket.signature,
          jsApiList: ['chooseWXPay']
        }
        wx.config(cfg_data)
      })()
    },
    // 获取分享海报
    __get_shareimg() {
      let self = this

      this.$u.api
        .get_share_picture({
          share_url: this.vuex_index_page
        })
        .then((res) => {
          console.log('分享===res', res)
					if(res.data.share_img.indexOf('https') !== -1) {
						self.share_img = res.data.share_img
					} else {
						self.share_img = self.vuex_api_HEADER + res.data.share_img
					}
        })
    },
    // 保存分享图片
    save_shareimg() {
      this.show_pic = true
    },
    // 获取粉丝列表
    get_fans_list() {
      this.$u.api.get_fans_list({
				page: 1,
				psize: 50
			}).then((res) => {
				if (res.code == 200) {
					if (res.data.data.length != 0) {
						this.fans_list = res.data.data
						console.log('this.fans_list', this.fans_list)
					}
				} else {
					uni.showToast({
						title: '网络不好，请稍后重试',
						icon: 'none'
					})
				}
			})
    },
		closePop() {
			this.get_fans_list();
		},
    // 升级到下一级
    to_next_level() {
      // 用户支付
      this.$u.api.level_buy().then((res) => {
        if (res.code == 200) {
          let cfg = res.data
          wx.chooseWXPay({
            timestamp: cfg.timeStamp,
            nonceStr: cfg.nonceStr,
            package: cfg.package,
            signType: cfg.signType,
            paySign: cfg.paySign,
            success: function (res) {
              // 支付成功后的回调函数
            }
          })
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
#content {
  // height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
	background: #6ae1e8 url(https://z3.ax1x.com/2021/09/06/h4pWgP.png) no-repeat;
	background-size: 100% 800rpx;
	padding-bottom: 100rpx;
  // 背景
  // .head-img {
  //   height: 70vh;
  //   .bgc {
  //     width: 100%;
  //     height: 100%;
  //   }
  // }

  .QR-BOX {
    // display: flex;
    // flex-direction: column;
    // justify-content: flex-end;
    // align-items: center;
    // position: relative;
    // padding: 10rpx;
    // height: 70vh;
    width: 94%;
		margin: 0 auto;
		background-color: #FFFFFF;
		margin-top: 600rpx;
		border-radius: 10rpx;
		.title {
			width: 70%;
			background:  url('../../../static/love_circle/ljfxbj.png') no-repeat;
			background-size: 100% 80rpx;
			color: #FFFFFF;
			height: 80rpx;
			margin: -38rpx auto 0;
			text-align: center;
			font-size: 30rpx;
			line-height: 80rpx;
		}
		.images {
			display: flex;
			justify-content: space-around;
			margin-top: 30rpx;
			.fximg {
				width: 100rpx;
				height: 180rpx;
				margin: 0 50rpx;
			}
			.fxtips {
				font-size: 24rpx;
				text-align: center;
			}
			.arrows {
				width: 50rpx;
				height: 50rpx;
				margin: 50rpx 0;
			}
			image {
				width: 100%;
				height: 100%;
			}
		}

    // 二维码
    .invate {
			margin: 100rpx auto 16rpx;
      width: 424rpx;
      height: 80rpx;
      background-color: #ec6505;
      border-radius: 37rpx;
      color: #ffffff;
      text-align: center;
      line-height: 80rpx;
      font-size: 40rpx;
    }
    .txt {
      color: #706E6E;
      font-size: 24rpx;
			text-align: center;
			margin-bottom: 30rpx;
    }
  }

  .level-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: #6ae1e8;
    margin-top: 20rpx;
    // border: 1px solid #000000;
		width: 94%;
		background: url('../../../static/index/tgsjbj.png') no-repeat;
		background-size: 100% 100%;

    .back-img {
      // width: 680rpx;
      height: 205rpx;
      position: relative;
      border-radius: 10rpx;
    }

    .grade-box {
      width: 680rpx;
      height: 205rpx;
      position: absolute;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;

      .top {
        .next-title {
          font-size: 24rpx;
          color: #715c3e;
          font-weight: 400;
        }

        .next-content {
          font-size: 35rpx;
          color: #715c3e;
          font-weight: 700;
        }
      }

      .grade-now {
				padding: 10rpx 40rpx;
        background-color: #eb6100;
        border-radius: 20rpx;
        color: #ffffff;
				font-size: 24rpx;
      }

      .cur-box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;

        .cur-left {
          height: 20rpx;
          width: auto;
          padding: 0 10rpx;
          color: #454545;
          font-size: 20rpx;
          line-height: 20rpx;
          text-align: center;
        }

        .cur-right {
          height: 20rpx;
          width: auto;
          padding: 0 10rpx;
          color: #454545;
          font-size: 20rpx;
          line-height: 20rpx;
          text-align: center;
        }
      }
    }
  }

  // 推广列表
  .list-box {
    // position: relative;
    height: 300rpx;
    width: 94%;
    border-radius: 10rpx;
    // border: 4px solid #000000;
		margin: 20rpx 0 50rpx;

    .popularize-list {
      background-color: #fff;
      width: 100%;
      padding: 40rpx;
      box-sizing: border-box;
      border-radius: 10rpx;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1rpx solid #f2f6ff;
        padding-bottom: 40rpx;
        box-sizing: border-box;
      }
      .list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 25rpx 0 22rpx 0;
        border-bottom: 1px solid #f2f6ff;
        .head-sculpture {
          width: 65.7rpx;
          height: 65.7rpx;
          margin-right: 19rpx;
        }
        .left {
          display: flex;
          align-items: center;
          .title_ {
            display: flex;
            align-items: center;
            font-size: 22rpx;
            line-height: 16rpx;
            color: #000;
            display: flex;
            margin-bottom: 20rpx;
            .sex {
              width: 26rpx;
              height: 26rpx;
              margin-left: 12rpx;
            }
          }
          .income {
            display: flex;
            font-size: 18rpx;
            color: #575757;
            display: flex;
            justify-content: space-between;
            .img {
              width: 28rpx;
              height: 28rpx;
              margin-right: 9rpx;
            }
          }
        }
        .right {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 91.8rpx;
          height: 35rpx;
          background-color: #ff9900;
          color: #fff;
          border-radius: 18rpx;
          font-size: 22rpx;
        }
      }
    }
  }

  .pic-box {
    .outter-box {
      width: 90vw;
      height: 90vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      border-radius: 20rpx;
      border: 1px solid #000000;
      position: relative;
      padding-top: 10rpx;

      .note-txt {
        width: auto;
        height: 50rpx;
        text-align: center;
        line-height: 50rpx;
        color: black;
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }
}
</style>
